<template>
  <div class="right-height bg-c-fff mb70 trading-record">
    <h2 class="box-title rel">平台交易记录</h2>
    <!--   <div class="seach">
        <input type="text" name="" class="input-css" v-model="keyword">
        <button class="xl-btn-css blue-button vb" @click="getTransacData(1)">搜索</button>
    </div> -->
    <div class="right-box">
      <div class="search">
        按日期：
        <calendar value="" format="yyyy-MM-dd" placeholder="开始时间" ref="start"></calendar> 至
        <calendar value="" format="yyyy-MM-dd" placeholder="结束时间" ref="ending"></calendar>
        <select class="input-css" v-model="time" @change="timeChange">
          <option value="">按时间段</option>
          <option value="today">今天</option>
          <option value="weekday">7天内</option>
          <option value="month">30天内</option>
        </select>
        <select class="input-css" v-model="type">
          <option value="">按交易类型</option>
          <option value="3">交易监控套餐</option>
          <option value="2">法律服务</option>
        </select>
        <select class="input-css" v-model="pay">
          <option value="">按支付状态</option>
          <option value="0">待付款</option>
          <option value="1">已支付</option>
          <option value="-1">已取消</option>
        </select>
        <select class="input-css" v-model="payType">
          <option value="">按支付方式</option>
          <option value="1">微信</option>
          <option value="2">支付宝</option>
          <option value="3">储蓄卡</option>
        </select>
        <select class="input-css" v-model="bill">
          <option value="">按是否开发票</option>
          <option value="1">是</option>
          <option value="0">否</option>
        </select>
        <input type="text" name="" class="input-css" placeholder="企业名称/注册手机号" v-model="keyword">
        <button class="blue-button xxl-btn-css " @click="onSearch">搜索</button>
      </div>
      <div class="main">
        <table class="tab-con" width="100%">
          <tr>
            <th>交易时间</th>
            <th>企业名称</th>
            <th>注册手机账号</th>
            <th>交易类型</th>
            <th>支付状态</th>
            <th>支付金额（元）</th>
            <th>支付方式</th>
            <th>剩余次数</th>
            <th>剩余时间</th>
            <th>是否开发票</th>
            <th>查看详情</th>
          </tr>
          <tr v-for="item in transacList">
            <td>{{item.createTime}}</td>
            <td>{{item.businessAccount}}</td>
            <td>{{item.businessPhone}}</td>
            <td>{{item.type| typeFilter}}</td>
            <td>{{item.pay| payFilter}}</td>
            <td>{{item.amount| moneyFilter}}</td>
            <td>{{item.payType| payTypeFilter}}</td>
            <td>{{item.surplusNumber | surplusTimeFilter}}</td>
            <td>{{getDays(item.orderTime, item.surplusTime)}}</td>
            <td>{{item.bill | billFilter}}</td>
            <td>
              <button class="xl-btn-css blue-button" @click="onDetailsClick(item.id)">查看详情</button>
            </td>
          </tr>
        </table>
        <pagination :index="pageIndex" :total="pageTotal" v-show="this.transacList!=0" @pagechange="onPageChange"></pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import Calendar from '../components/Calendar'
import Pagination from '../components/Pagination'
export default {
  components: {
    Pagination,
    Calendar
  },
  data() {
    return {
      pageIndex: 1,
      pageTotal: 0,
      transacList: [],
      beginTime: '',
      endTime: '',
      time: '',
      type: '',
      pay: '',
      payType: '',
      bill: '',
      keyword: ''
    }
  },
  mounted() {
    this.onPageChange(1)
  },
  methods: {
    onPageChange(n) {
      this.getTransacData(n)
    },
    getTransacData(n) {
      var parms = {
        type: this.type,
        beginTime: this.beginTime,
        endTime: this.endTime,
        pay: this.pay,
        payType: this.payType,
        bill: this.bill,
        page: n,
        rows: 10,
        keyWord: this.keyword
      }
      this.$http.get('/transactionRecord/system/read/list', {
        params: parms
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.pageIndex = n
          this.pageTotal = Math.ceil(data.data.total / 10)
          this.transacList = data.data.rows
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    timeChange() {
      var newData = new Date().getTime()
      var newTime = this.formatDate(new Date())
      if (this.time === 'today') {
        this.$refs.start.inputValue = newTime
        this.$refs.ending.inputValue = newTime
      }
      if (this.time === 'weekday') {
        var weekStartTime = this.formatDate(new Date(newData - 7 * 86400000))
        this.$refs.start.inputValue = weekStartTime
        this.$refs.ending.inputValue = newTime
      }
      if (this.time === 'month') {
        var monthStartTime = this.formatDate(new Date(newData - 30 * 86400000))
        this.$refs.start.inputValue = monthStartTime
        this.$refs.ending.inputValue = newTime
      }
    },
    formatDate(date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + m + '-' + d
    },
    onSearch() {
      this.beginTime = this.$refs.start.inputValue
      this.endTime = this.$refs.ending.inputValue
      this.getTransacData(1)
    },
    onDetailsClick(id) {
      this.$router.push('/trading-record-details?id=' + id)
    },
    getDays(d, i) {
      if (!i) {
        return '--'
      }
      var dayNumber = Math.floor((new Date().getTime() - (new Date(d)).getTime()) / 1000 / 60 / 60 / 24)
      var difference = i - dayNumber
      if (i === -1) {
        return '不限'
      }
      if (difference <= 0) {
        return '0天'
      } else {
        return difference + '天'
      }
    }
  },
  filters: {
    typeFilter(t) {
      if (t === 3) {
        return '交易监控套餐'
      } else if (t === 2) {
        return '法律服务'
      }
    },
    payFilter(p) {
      if (p === 0) {
        return '待付款'
      } else if (p === 1) {
        return '已支付'
      } else if (p === -1) {
        return '已取消'
      }
    },
    moneyFilter(m) {
      return (m / 100).toFixed(2) + '元'
    },
    payTypeFilter(pt) {
      if (pt === 1) {
        return '微信'
      } else if (pt === 2) {
        return '支付宝'
      } else if (pt === 3) {
        return '储蓄卡'
      }
    },
    billFilter(b) {
      if (b === 0) {
        return '否'
      } else if (b === 1) {
        return '是'
      }
    },
    surplusTimeFilter(t) {
      if (!t) {
        return '--'
      } else if (t < 0) {
        return '不限'
      } else {
        return t + '次'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.right-height {
  min-height: 700px;
}

.trading-record {
  width: 1330px;
}

.trading-record .right-box .search {
  margin-top: 20px;
}

.input-css {
  margin-top: 10px;
  vertical-align: bottom;
}

select {
  margin-right: 9px;
}

.xxl-btn-css {
  width: 110px;
}

.trading-record .main {
  margin-top: 35px;
}

h2 {
  display: inline-block;
}

.seach {
  float: right;
  margin-right: 40px;
  line-height: 41px;
}

.seach input,
.seach button {
  height: 35px;
  line-height: 35px;
}

.datepicker-input {
  width: 100px;
}

</style>
